<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>表格</title>
		<!-- basic styles -->

		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- fonts -->
		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css" />

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

		<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		
		<!-- inline styles related to this page -->
		<link rel="stylesheet" href="jquery.tzCheckbox/jquery.tzCheckbox.css"/>

		<!-- ace settings handler -->

		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<script src="assets/js/respond.src.js"></script>
		
		<style type="text/css">
		.dataTables_wrapper .row:first-child {
			padding-top: 0px;
			padding-bottom: 0px;
			background-color: #eff3f8
		}
		
		.custome-row{
			padding-top: 8px;
			padding-bottom: 0px;
			background-color: #eff3f8;
		}
		
		.custome-row label{
			font-size: 13px;
		}
		
		.btn-jit {
			font-size: 18px;
		}		
		</style>
	</head>

	<body>
		<div class="main-container" id="main-container">
			<div class="main-container-inner">
				<div class="main-content" style="padding-left: 0;margin-left: 0;">
					<div class="breadcrumbs" id="breadcrumbs">
						<ul class="breadcrumb">
							<li>
								<i class="icon-home home-icon"></i>
								<a href="#">Demo</a>
							</li>

							<li>
								<a href="#">Form Demo</a>
							</li>
							<!-- 
							<li class="active">Simple &amp; Dynamic</li>
							 -->
						</ul><!-- .breadcrumb -->

						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="icon-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- #nav-search -->
					</div>

					<div class="page-content">
						<!--  
						<div class="page-header">
							<h1>
								Tables
								<small>
									<i class="icon-double-angle-right"></i>
									Static &amp; Dynamic Tables
								</small>
							</h1>
						</div>
						-->
						<!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
											<div class="widget-box">
													<div class="widget-header">
														<h4>设备信息配置</h4>
														<!-- 
														<span class="widget-toolbar">
															<a href="#" data-action="settings">
																<i class="icon-cog"></i>
															</a>
	
															<a href="#" data-action="reload">
																<i class="icon-refresh"></i>
															</a>
	
															<a href="#" data-action="collapse">
																<i class="icon-chevron-up"></i>
															</a>
	
															<a href="#" data-action="close">
																<i class="icon-remove"></i>
															</a>
														</span>
														 -->
													</div>
													
													<div class="widget-body">
											<div class="space-4"></div>
											<div class="row">
											<form class="form-horizontal" role="form">
												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right" for="form-field-1"><span style="color: red;">*</span> 设备类型 </label>
			
													<div class="col-sm-9">
														<input type="text" id="form-field-1" placeholder="JIT产品" class="col-xs-10 col-sm-5" />
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right" for="form-field-1"><span style="color: red;">*</span> 产品类型 </label>
			
													<div class="col-sm-9">
														<select  id="form-field-select-1" class="col-xs-10 col-sm-5 no-padding-right">
															<option value="">CA</option>
															<option value="AL">RA</option>
															<option value="AK">网关</option>
														</select> 
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right" for="form-field-6"><span style="color: red;">*</span> 设备名称 </label>

													<div class="col-sm-9">
														<input data-rel="tooltip" type="text" id="form-field-6" placeholder="zy1" title="Hello Tooltip!" class="col-xs-10 col-sm-5" data-placement="bottom" data-placement="left"/>
														<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right" for="form-field-6"><span style="color: red;">*</span> 设备IP </label>

													<div class="col-sm-9">
														<input data-rel="tooltip" type="text" id="form-field-6" placeholder="172.16.12.1" title="Hello Tooltip!" data-placement="bottom"  class="col-xs-10 col-sm-5"/>
														<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label no-padding-right" for="form-field-6"><span style="color: red;">*</span> 设备照片 </label>

													<div class="col-sm-9">
														<div class="col-xs-12 col-sm-5" style="padding-left: 0px;padding-right: 0px;">
														<input id="file1" type="file"/>
														</div>
														<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
													</div>
												</div>
												
											</form>
											</div>
											<div class="row">
											<div class="col-sm-3">
											</div>
											<div class="col-sm-9" style="padding-left: 6px;">
												<div class="table-responsive" style="width: 360px;float: left;">
																<div class="table-header" >
																	自定义属性
																	<div  class="widget-toolbar">
																		<a href="#" data-action="settings">
																			<i class="icon-arrow-right" style="color: #fff;"></i>
																		</a>
																	</div>
																</div>
														<table id="sample-table-1" class="table table-striped table-bordered table-hover">
															<thead>
																			<tr>
																				<td colspan="5" style="background-color: menu;">
																				<button class="btn btn-info btn-sm"><i class="icon-ok"></i>添加</button>
																				</td>
																			</tr>
																			<tr>
																				<th class="center" align="center">
																				<label>
																					<input type="checkbox"/>
																				</label>
																				</th>
																				<th class="center" align="center">属性名称</th>
																				<th class="center" align="center">属性值1</th>
																				<th class="center" align="center">属性值2</th>
																				<th class="center" align="center">
																					操作
																				</th>
																			</tr>
																</thead>
																<tbody>
																			<tr>
																				<td class="center" align="center">
																					<label>
																						<input type="checkbox"/>
																					</label>
																				</td>
						
																				<td align="center">
																					<a href="#">内网网关</a>
																				</td>
																				<td align="center">网关</td>
																				<td align="center">网关2</td>
																				<td align="center">
																					<a class="red" href="#">
																						<i class="icon-trash bigger-130"></i>
																					</a>
																				</td>
																			</tr>
																			<tr>
																				<td class="center">
																					<label>
																						<input type="checkbox"/>
																					</label>
																				</td>
						
																				<td align="center">
																					<a href="#">外网网关</a>
																				</td>
																				<td align="center">网关</td>
																				<td align="center">网关2</td>
																				<td align="center">
																					<a class="red" href="#">
																						<i class="icon-trash bigger-130"></i>
																					</a>
																				</td>
																			</tr>
																			<tr>
																				<td class="center">
																					<label>
																						<input type="checkbox"/>
																					</label>
																				</td>
						
																				<td align="center">
																					<a href="#">其它网关</a>
																				</td>
																				<td align="center">网关</td>
																				<td align="center">网关2</td>
																				<td align="center">
																					<a class="red" href="#">
																						<i class="icon-trash bigger-130"></i>
																					</a>
																				</td>
																			</tr>
																</tbody>
														</table>
												</div>
												<div  style="float: left;">
													<br>
													<br>
													<br>
													<br>
													<br>
													<br>
													<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
												</div>
										</div>
										<!-- 
										<div class="col-sm-5" style="padding-left: 0px;margin-left: 0px;vertical-align: middle;background-color: red;">
											<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
										</div>
										 -->
									</div>
						<hr>
						<div class="row">
							<div class="col-xs-12">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-1"><span style="color: red;">*</span> 设备IP </label>
										<div class="col-sm-9">
											<input name="deviceType" type="radio" value="1" />PING &nbsp;&nbsp;&nbsp;
											<input name="deviceType" type="radio" value="1" checked="checked"/>SNMP &nbsp;&nbsp;&nbsp;
											<input name="deviceType" type="radio" value="1" />TELNET
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-6"><span style="color: red;">*</span> 端口 </label>
											<div class="col-sm-9">
												<input data-rel="tooltip" type="text" id="form-field-6" placeholder="" title="Hello Tooltip!" data-placement="bottom" class="col-xs-10 col-sm-5"/>
												<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
											</div>
									</div>
								</form>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div class="row">
									<div class="col-sm-3">
										&nbsp;
									</div>
									<div class="col-sm-4 widget-container-span">
										<div class="widget-box" style="width: 360px;">
											<div class="widget-header">
												<label>
													业务监控
													<input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" />
												</label>
												<div class="widget-toolbar">
													<a href="#">
														<i class="icon-arrow-right" style="color: #fff;"></i>													
													</a>
													<!-- 
													<a href="#" data-action="settings">
														<i class="icon-cog"></i>
													</a>

													<a href="#" data-action="reload">
														<i class="icon-refresh"></i>
													</a>

													<a href="#" data-action="collapse">
														<i class="icon-chevron-up"></i>
													</a>

													<a href="#" data-action="close">
														<i class="icon-remove"></i>
													</a>
													 -->
												</div>
											</div>

											<div id="yewubody" class="widget-body hide" style="width: 360px;">
												<div class="widget-main">
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 加密通信 </label>
				
														<div class="col-sm-9">
															<input type="checkbox" />设备监控时对通信消息进行加密
														</div>
													</div>
														</div>
													</div>
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 业务端口 </label>
				
														<div class="col-sm-9">
															<input type="text" id="form-field-20" placeholder="Username" class="col-xs-10 col-sm-10" value="8123"/>
															<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
														</div>
													</div>
														</div>
													</div>
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> URL后缀 </label>
				
														<div class="col-sm-9">
															<input type="text" id="form-field-20" placeholder="Username" class="col-xs-10 col-sm-10" value="jit.com.cn"/>
															<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
														</div>
													</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div class="row">
									<div class="col-sm-3">
										&nbsp;
									</div>
									<div class="col-sm-9 widget-container-span">
										<div class="widget-box" style="width: 360px;">
											<div class="widget-header">
												<label>
												Agent部署<input type="checkbox" id="ch_emails2" name="ch_emails2" data-on="ON" data-off="OFF" />
												</label>
												
												<div class="widget-toolbar">
													<a href="#">
														<i class="icon-arrow-right" style="color: #fff;"></i>													
													</a>
												<!-- 
													<a href="#" data-action="settings">
														<i class="icon-cog"></i>
													</a>

													<a href="#" data-action="reload">
														<i class="icon-refresh"></i>
													</a>

													<a href="#" data-action="collapse">
														<i class="icon-chevron-up"></i>
													</a>

													<a href="#" data-action="close">
														<i class="icon-remove"></i>
													</a>
												 -->
												</div>
											</div>

											<div id='agentBodyID' class="widget-body hide" style="width: 360px;">
												<div class="widget-main">
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 加密通信 </label>
				
														<div class="col-sm-9">
															<input type="checkbox" />设备监控时对通信消息进行加密
														</div>
													</div>
														</div>
													</div>
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Agent端口 </label>
				
														<div class="col-sm-9">
															<input type="text" id="form-field-20" placeholder="Username" class="col-xs-10 col-sm-10" value="8142"/>
															<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
														</div>
													</div>
														</div>
													</div>
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 硬盘阈值 </label>
				
														<div class="col-sm-9">
															<input type="text" id="form-field-20" placeholder="Username" class="col-xs-10 col-sm-10" value="80"/>
															<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
														</div>
													</div>
														</div>
													</div>
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 内存阈值 </label>
				
														<div class="col-sm-9">
															<input type="text" id="form-field-20" placeholder="Username" class="col-xs-10 col-sm-10" value="80"/>
															<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
														</div>
													</div>
														</div>
													</div>
													<div class="row">
														<div class="col-xs-12">
													<div class="form-group">
														<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> CPU阈值 </label>
				
														<div class="col-sm-9">
															<input type="text" id="form-field-20" placeholder="Username" class="col-xs-10 col-sm-10" value="80"/>
															<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right" data-content="More details." title="Popover on hover">?</span>
														</div>
													</div>
														</div>
													</div>
													
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<br>
						<div class="widget-box" style="background-color: menu;">
						<br>
						<div class="row" align="center">
							<button class="btn btn-info btn-jit">
								<i class="icon-save"></i>
								保存
							</button>
							<button class="btn btn-info btn-jit">
								<i class="icon-undo"></i>
								返回
							</button>
						</div>
						<br>
						</div>
						
						<div class="space-5"></div>
						<br/>
									
													
											</div>
													</div>
											</div>
											
						
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->

				</div><!-- /.main-content -->

			</div><!-- /.main-container-inner -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->
		<script src="assets/js/jquery-1.10.2.min.js"></script>


		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>

		<!-- page specific plugin scripts -->

		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>

		<script src="assets/js/jquery-ui-1.10.3.full.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<!-- ace scripts -->

		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->

		<script src="assets/js/bootbox.min.js"></script>

		<script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
		
		<script type="text/javascript">
			jQuery(function($){
				$('#file1').ace_file_input({
					no_file:'上传扩展名为JPG,PNG,GIF的图片文件.',
					btn_choose:'浏览...',
					btn_change:'重新选择',
					droppable:false,
					onchange:null,
					thumbnail:false //| true | large
					//whitelist:'gif|png|jpg|jpeg'
					//blacklist:'exe|php'
					//onchange:''
					//
				});
				
				$('[data-rel=tooltip]').tooltip({container:'body'});
				$('[data-rel=popover]').popover({container:'body'});
				
				var box1 = $('#ch_emails').tzCheckbox({labels:['Enable','Disable'],callback:function(v){
					if(v){
						$('#yewubody').removeClass('hide');
					}else{
						$('#yewubody').addClass('hide');
					}
				}});
				
				var box2 = $('#ch_emails2').tzCheckbox({labels:['Enable','Disable'],callback:function(v){
					if(v){
						$('#agentBodyID').removeClass('hide');
					}else{
						$('#agentBodyID').addClass('hide');
					}
				}});
			})
		</script>
</body>
</html>
